<template>
    <div class="static-container">
        <el-tabs type="card" v-model="editableTabsValue" @tab-click="updateActiveTab" @tab-remove="removeTab" closable ref="tabs">
            <el-tab-pane v-for="item in tabs" :key="item.name" :name="item.name">
                <span slot="label"><i :class="item.iconName"></i> {{ item.title }}</span>
                <RiskResultSumTab
                    :activeValue="item.name"
                    :assetList="assetList"
                    :fdAcList="fdAcList"
                    @handleRowOperateSumLook="handleRowOperateSumLook"
                    @handleRowOperateChart="handleRowOperateChart"
                    @updateActiveTab="e => (editableTabsValue = e)"
                ></RiskResultSumTab>
            </el-tab-pane>
            <el-tab-pane label="静态历史下载" name="third">
                <RiskResultDownload ref="riskResultDownload" />
            </el-tab-pane>
            <el-tab-pane v-for="item in editableTabs" :key="item.name" :name="item.name">
                <span slot="label"><i class="el-icon-discover"></i> {{ item.title }}</span>
                <component :is="item.content" :transToResultDetail="transToResultDetail"
                           :isHistory="isHistory"
                           :activeValue="item.name"
                           :assetList="assetList"
                           :fdAcList="fdAcList"
                           @handleRowOperateLook="handleRowOperateLook"
                           @handleRowOperateChart="handleRowOperateChart"
                           @updateActiveTab="e => (editableTabsValue = e)"
                ></component>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import StaticResultDetail from '@/pages/static/risk-result/static-result-detail.vue';
import XEUtils from 'xe-utils';
import StaticResultChart from '@/pages/static/risk-result/static-result-chart.vue';
import ColumnUtil from '@/pages/risk-time/utils/column-util.ts';
import { getConfigItem } from '@/utils/tools';
import RiskResultDownload from '@/pages/static/risk-result/risk-result-download.vue';
import { VueObject } from 'vue/types/index';
import RiskResultSumTab from '@/project/fscinda/pages/risk-result/risk-result-sum-tab.vue';
import RiskResultSumDetail from '@/project/fscinda/pages/risk-result/risk-result-sum-detail.vue';
export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}

@Component({
    name: 'RiskResultMain',
    components: {
        RiskResultSumDetail,
        RiskResultDownload,
        RiskResultSumTab,
    },
})
/**
 * 归纳：历史结果参数是结果参数的子集,命名也相同,排序字段也可以共用
 */
export default class RiskResultMain extends Vue {
    SHOW_SECURITY = getConfigItem('SHOW_SECURITY');
    WEB_DOCKING = getConfigItem('WEB_DOCKING');
    ColumnUtil = new ColumnUtil();
    tabs: any = [
        {
            name: 'sumFirst',
            title: '静态结果汇总',
            iconName: 'el-icon-discover',
        },
        {
            name: 'sumSecond',
            title: '静态历史结果汇总',
            iconName: 'el-icon-s-order',
        },
    ];

    private editableTabsValue: string = 'sumFirst'; // 当前标签

    private transToResultDetail = {}; // 详情数据

    private editableTabs = []; // 所有tabs值

    private oldValue = 'sumFirst'; // 删除标记记录切换

    private tabRecord: any[] = []; // 标签记录

    private isHistory: boolean = false; // 是否为历史详情

    assetList: any = [];
    fdAcList: any[] = [];

    async mounted() {
        if (this.SHOW_SECURITY) {
            this.$axios.get('/asset/list/byFundCode').then((res: any) => {
                this.assetList = res;
            });
            this.$axios.get('/fdAc/list/byFundCode').then((res: any) => {
                this.fdAcList = res;
            });
        }
    }

    /* **************************  tab标签处理START ****************/
    // 切换标签页
    private updateActiveTab(tab): void {
        if (['first', 'second', 'sumFirst', 'sumSecond'].includes(tab.name)) {
            this.oldValue = tab.name;
        }
        if (tab.name === this.editableTabsValue) {
            return;
        }
    }

    // 添加标签
    private addTab(row): void {
        const resultId = row.resultId.toString();
        let tabs = XEUtils.map(this.editableTabs, item => item.name);
        if (tabs.includes(resultId)) {
            this.editableTabsValue = resultId;
        } else {
            this.editableTabs.push({
                title: resultId,
                name: resultId,
                content: StaticResultDetail,
            });
            this.editableTabsValue = resultId;
            this.$set(this.tabRecord, this.editableTabsValue, this.oldValue);
        }
    }

    // 添加汇总详情标签
    private addSumTab(row): void {
       /* let name = 'first';
        if (this.isHistory) {
            name = 'second';
        } */
        let name = row.entryCode + '/' + row.fundCode;
        let tabs = XEUtils.map(this.editableTabs, item => item.name);
        if (tabs.includes(name)) {
            this.editableTabsValue = name;
        } else {
            this.editableTabs.push({
                title: name,
                name: name,
                content: RiskResultSumDetail,
            });
            this.editableTabsValue = name;
            this.$set(this.tabRecord, this.editableTabsValue, this.oldValue);
        }
    }

    // 添加走势图
    addChartTab(targetName) {
        let tabs = XEUtils.map(this.editableTabs, item => item.name);
        if (tabs.includes('指标走势图' + targetName)) {
            this.editableTabsValue = '指标走势图' + targetName;
        } else {
            this.editableTabs.push({
                title: '指标走势图' + targetName,
                name: '指标走势图' + targetName,
                content: StaticResultChart,
            });
            this.editableTabsValue = '指标走势图' + targetName;
            this.$set(this.tabRecord, this.editableTabsValue, this.oldValue);
        }
    }

    // 移除tab
    removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
            tabs.forEach((tab, index) => {
                if (tab.name === targetName) {
                    let nextTab = tabs[index + 1] || tabs[index - 1];
                    if (nextTab) {
                        activeName = nextTab.name;
                    } else {
                        activeName = this.tabRecord[targetName];
                    }
                }
            });
        }
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    }

    /* **************************  tab标签处理END ****************/

    // 详情
    private handleRowOperateLook({ row, isHistory }): void {
        this.isHistory = isHistory;
        this.addTab(row);
        this.transToResultDetail = JSON.parse(JSON.stringify(row));
    }

    // 汇总详情
    private handleRowOperateSumLook({ row, isHistory }): void {
        this.isHistory = isHistory;
        this.addSumTab(row);
        this.transToResultDetail = JSON.parse(JSON.stringify(row));
    }

    // 走势图
    private handleRowOperateChart(row): void {
        this.addChartTab(row.resultId);
        this.transToResultDetail = row;
    }

    @Watch('editableTabsValue')
    private tabChange() {
        if (this.editableTabsValue == 'third') {
            // debugger;
            (this.$refs['riskResultDownload'] as VueObject).queryByCurrentUser();
        }
    }
}
</script>
<style lang="scss" scoped>
.static-container {
    padding-top: 10px;
    min-width: 1200px;
    height: 100%;
}
.static-container /deep/ .el-tabs .el-tabs__nav .el-tabs__item {
    line-height: 34px;
    padding: 0 25px;
}

.static-container /deep/ .el-tabs .el-tabs__nav .el-tabs__item span {
    border-right: 0px solid #fff;
}

.static-container /deep/ .el-tabs .el-tabs__nav .el-tabs__item:nth-child(1) .el-icon-close {
    display: none;
}

.static-container /deep/ .el-tabs .el-tabs__nav .el-tabs__item:nth-child(2) .el-icon-close {
    display: none;
}

.vxe-table .vxe-body--row.row--hover {
    background-color: #cce9ff !important;
}

.vxe-table .vxe-body--row.row--current {
    background-color: #2589f5 !important;
    color: #fff !important;
}

.el-tooltip__popper.is-dark {
    max-height: 300px;
    overflow: auto !important;
    white-space: nowrap;
}

/deep/ .el-divider--horizontal {
    margin: 0;
}
// /deep/ .vxe-table .vxe-table--body-wrapper {
//     height: calc(100vh - 230px) !important;
// }
</style>
